<template>
 <div>
  <el-row style="margin-bottom: 30px">
    <el-clo :span="3">
      <button style="border:none;background-color: white;" @click="ShowWarehouseData">＜返回</button>
    </el-clo>
   <el-col :span="0.1">
    <span>|</span>
   </el-col>
    <el-clo :span="1">
      <button style="border:none;background-color: white;color:#54a47e"><b>工序</b></button>
    </el-clo>
  </el-row>
  <el-form :inline=true :model="form" label-width="auto" style="max-width: 100%">
    <el-form-item label="工序编号" style="width: 600px;">
      <el-input v-model="form.ProcessNum" />
    </el-form-item>
    <el-form-item label="工序名称" style="width: 600px;">
      <el-input v-model="form.ProcessName" />
    </el-form-item>
    <el-form-item label="工作中心" style="width: 600px;">
          <el-select v-model="form.WorkCentre" placeholder="请选择">
            <el-option v-for="item in WorkCenterData" :label="item.workCenterName" :value="item.workCenterName" :key="item.workCenterId" />
          </el-select>
    </el-form-item>
    <el-form-item label="状态" style="width: 600px;">
          <el-select v-model="form.ProcessState" placeholder="请选择状态">
            <el-option label="有效" :value=false />
            <el-option label="无效" :value=true />
          </el-select>
    </el-form-item>
  </el-form>
  <el-button style="background-color: #54a47e;color: white;margin-left: 1080px;height: 30px;" @click="InsertProcess">保存<img src="../Process/img/image.png" alt=""></el-button>
  <el-button @click="InsertProcessData" v-if="form.AddData>0">提交</el-button>

  <H2 style=" color:#50a5f1 ;"><b>所需资源行</b></H2>
  <el-button style="margin-left: 1150px;background-color: #50a5f1;color: white;" @click="AddWorkCenterWealth_" v-if="form.AddData>0">新增资源</el-button>
  <el-button style="margin-left: 1150px;background-color:lightgrey;color:dimgray;" v-if="form.AddData==0" @click="OnGetProcess">新增资源</el-button>
    <el-table :data="ProcessWealthList">
      <el-table-column prop="MyProperty" label="序号" width="60" />
      <el-table-column prop="ProcessDetailNum" label="资源编码" width="130" />
      <el-table-column prop="ProcessDetailName" label="资源名称" width="130" />
      <el-table-column prop="ProcessDetailUnits" label="资源单位" width="130" />
      <el-table-column prop="ProcessDetailDosage" label="资源用量" width="130" />
      <el-table-column prop="UnitsPrice" label="单位成本" width="130" />
      <el-table-column prop="CreateTime" label="创建时间" width="130" >
        <template v-slot="scope">
          {{moment(scope.row.CreateTime).format('YYYY年MM月DD日')}}
        </template>
      </el-table-column>
      <el-table-column prop="CreateName" label="创建人" width="130" />
      <el-table-column prop="ProcessDetailState" label="状态" width="130" />
      <el-table-column label="操作">
        <el-button>编辑</el-button>
        <el-button>删除</el-button>
      </el-table-column>
    </el-table>

  <!-- 新增行 -->
  <div>
    <el-dialog v-model="dialogFormVisible" title="资源航编辑" width="500">
      <el-form :model="ProcessWealth">
          <el-form-item label="资源" :label-width="formLabelWidth">
            <el-select v-model="ProcessWealth.ProcessDetailName" placeholder="请选择">
              <el-option v-for="item in ShowWorkCenterWealth" :label="item.workCenterWealthName" :value="item.workCenterWealthName" :key="item.workCenterWealthId" />
            </el-select>
          </el-form-item>
          <el-form-item label="资源单位" :label-width="formLabelWidth">
            <el-select v-model="ProcessWealth.ProcessDetailUnits" placeholder="请选择">
              <el-option label="个/台" value="个/台" />
              <el-option label="次" value="次" />
              <el-option label="克" value="克" />
              <el-option label="小时" value="小时" />
              <el-option label="千克" value="千克" />
              <el-option label="毫升" value="毫升" />
              <el-option label="人" value="人" />
            </el-select>
          </el-form-item>
          <el-form-item label="资源用量" :label-width="formLabelWidth">
            <el-input v-model="ProcessWealth.ProcessDetailDosage" autocomplete="off" />
          </el-form-item>
          <el-form-item label="单位成本" :label-width="formLabelWidth">
            <el-input v-model="ProcessWealth.UnitsPrice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="摘要" :label-width="formLabelWidth">
            <el-input v-model="ProcessWealth.AbstractData" autocomplete="off" />
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
        <el-select v-model="ProcessWealth.ProcessDetailState" placeholder="请选择状态">
          <el-option label="有效" :value=false />
          <el-option label="无效" :value=true />
        </el-select>
      </el-form-item>
      </el-form>
      <el-button style="margin-left: 330px" @click="dialogFormVisible = false" >返回</el-button>
      <el-button @click="AddWorkCenterWealth">确定</el-button>
    </el-dialog>
  </div>
 </div>
</template>
<script lang="ts" setup>
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const apiUri=import.meta.env.VITE_APP_API_URL_WAREHOUSE;
const router=useRouter();
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
import moment from 'moment';

//工序字段
const form=reactive({
ProcessId :0,
ProcessNum:'',
ProcessName :'',
WorkCentre :'',
ProcessState :'',
ProcessAudit :0,
IsDelProcess :false,
Handle :'张三',
HandleContext :'添加工序',
handleTime:'',
Pid:1,
IsDelete :false,
AddData:0
})

//工序明细字段
const ProcessWealth=reactive({
MyProperty :0,
WarehouseADId :0,
ProcessDetailNum:'',
ProcessDetailName:'',
ProcessDetailUnits :'',
ProcessDetailDosage :'',
UnitsPrice :'',
AbstractData :'',
CreateTime :'',
CreateName :'张三',
ProcessDetailState :'',
IsDelProcessDetail:false, 
Handle :'张三',
HandleContext :'添加工序',
handleTime:'',
Pid:1,
IsDelete :false,
})

//用户行为字段
const UserLogData=reactive({
UserLogId :0,
Handle :'张三',
HandleContext:'添加工序', 
Pid :1,
IsDelete:false
})

onMounted(()=>{
  GetWorkCenterData();
})

//#region 工序

//获取工作中心表数据
const WorkCenterData:any=ref([]);
const GetWorkCenterData=()=>{
  axios.get(apiUri+"/api/Process/GetWorkCenterData").then(res=>{
    WorkCenterData.value=res.data.data;
    console.log(res.data.data);
  })
}

//保存按钮
const InsertProcess=()=>{
  console.log(123,form);
  form.AddData=1;
  GetWorkCenterWealth();
  ProcessWealth.ProcessDetailName='';
  ProcessWealth.ProcessDetailUnits='';
  ProcessWealth.ProcessDetailState='';
}

//提示未保存
const OnGetProcess=()=>{
  ElMessage.error('请先点击保存');
}

//#endregion

//#region 工序明细

//获取工作中心资源分类表数据
const ShowWorkCenterWealth:any=ref([]);
let workCenterName_="";
const GetWorkCenterWealth=()=>{
  workCenterName_=form.WorkCentre;
  const GetWorkCenter=WorkCenterData.value.find(x=>x.workCenterName==form.WorkCentre);
  console.log(33,GetWorkCenter.workCenterId);
  axios.post(apiUri+"/api/Process/GetWorkCenterWealthData",{
    processId:GetWorkCenter.workCenterId
  }).then(res=>{
    ShowWorkCenterWealth.value=res.data.data;
    console.log("ShowWealth",res.data.data);
  })
}

//保存选择的资源
const array:any[]=[];
const ProcessWealthList=ref(array);
const AddWorkCenterWealth=()=>{
  ProcessWealth.MyProperty++;
  ProcessWealth.ProcessDetailNum=(ShowWorkCenterWealth.value.find(x=>x.ProcessDetailName==ProcessWealth.ProcessWealth)).workCenterWealthNum;
  ProcessWealthList.value.push({
    MyProperty :ProcessWealth.MyProperty,
    ProcessDetailNum:ProcessWealth.ProcessDetailNum,
    ProcessDetailName:ProcessWealth.ProcessDetailName,
    ProcessDetailUnits :ProcessWealth.ProcessDetailUnits,
    ProcessDetailDosage :ProcessWealth.ProcessDetailDosage,
    UnitsPrice :ProcessWealth.UnitsPrice,
    AbstractData :ProcessWealth.AbstractData,
    CreateTime :new Date(),
    CreateName :ProcessWealth.CreateName,
    ProcessDetailState :ProcessWealth.ProcessDetailState,
    IsDelProcessDetail:ProcessWealth.IsDelProcessDetail, 
    WarehouseADId:form.ProcessNum,
    Handle :'张三',
    HandleContext :'添加工序',
    handleTime:new Date(),
    Pid:1,
    IsDelete :false,
  });
  console.log(789,ProcessWealthList);
}

//检测是否更换工作中心值
const AddWorkCenterWealth_=()=>{
  if(workCenterName_!=form.WorkCentre)
  {
    ElMessage.error('请点击保存');
    return;
  }
  dialogFormVisible.value=true
}

//#endregion

//添加工序表数据
const InsertProcessData=()=>{
axios.post(apiUri+"/api/Process/AddProcessData",{
  ProcessId :form.ProcessId,
  ProcessNum:form.ProcessNum,
  ProcessName :form.ProcessName,
  WorkCentre :form.WorkCentre,
  ProcessState :form.ProcessState,
  ProcessAudit :form.ProcessAudit,
  IsDelProcess :form.IsDelProcess,
  Handle :form.Handle,
  HandleContext :form.HandleContext,
  HandleTime:new Date(),
  Pid:form.Pid,
  IsDelete :form.IsDelete,
  processDetails:ProcessWealthList.value
}).then(res=>{
  if(res.data.code>0)
  {
    AddUserLogData();
  }
  else
  {
    ElMessage.error('添加失败');
  }
})
}

const AddUserLogData=()=>{
  axios.post(apiUri+"/api/UserLog/AddUserLogData",{
  UserLogId :UserLogData.UserLogId,
  Handle :UserLogData.Handle,
  HandleContext:UserLogData.HandleContext,
  Pid :UserLogData.Pid,
  IsDelete:UserLogData.IsDelete
  }).then(res=>{
    if(res.data.code>0)
    {
      ElMessage.success('添加成功');
    }
    else
    {
      ElMessage.error('添加失败');
    }
  })
}

//返回工序表
const ShowWarehouseData=()=>{
  router.push('/ShowProcessData');
}
</script>